<template>
  <div class="contentCon shadow"  id="ConfirmBottom">

    <div class="content midfont" style="text-align: center;box-sizing: border-box;padding: .5rem">
      <i :class="dIcon" aria-hidden="true" v-if="dIcon"></i>
      {{content}}
    </div>
    <div class="flex">
      <div class="flex-item btn btn-primary" @click="confirm(1)">
        <i class="fa fa-check" > 确定</i>
      </div>
      <div class="flex-item btn btn-default" @click="confirm(0)">
        <i class="fa fa-remove" > 取消</i>
      </div>
    </div>
  </div>
</template>
<style scoped>
.btn{box-sizing: border-box;margin: .2rem;}
#ConfirmBottom{
  display: none;
  background-color: #ffffff;border-radius: .3rem .3rem 0 0;padding: .5rem;box-sizing: border-box;
  position: fixed;z-index: 9999;
  width: 10rem;
  bottom: 0;
  left: 0;
  color: #333333;
}
</style>
<script>
export default {
  props:{
    icon:{
      default:''
    }
  },
  data(){
    return {
      is_show:0,
      content: "",
      dIcon:this.icon,
      callback:null
    }
  },
  methods:{
    setIcon(v){
      this.dIcon = v
      return this
    },
    show(callback){
      let _this = this
      if (callback==undefined)return false;
      _this.callback = callback
      $("#ConfirmBottom").slideDown("fast")
    },
    confirm(b){
      let _this = this
      $("#ConfirmBottom").slideUp("fast",_this.callback(b))
    },
    setContent(content){
      this.content = content
      return this
    }
  }
}
</script>
